<template>
  <div id="good-item" :style="styleData" @click="goToDetail(iid)">
    <img :src="img" @load="imgLoad"/>
    <div class="title">{{ title }}</div>
    <div class="price-collect">
      <div class="price">￥{{ price }}</div>
      <div class="collect">❤{{ cfav }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "GoodItem",
  props: {
    iid: {
      type: String,
      default: "",
    },
    img: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
    price: {
      type: String,
      default: "",
    },
    cfav: {
      type: Number,
      default: 0,
    },

    fontsize: {
      type: String,
      default: "12px",
    },
    columns: {
      type: Number,
      default: 2,
    },
  },
  computed: {
    calcWidth() {
      return 100 / this.columns - 1 + "%";
    },
    styleData() {
      return { width: this.calcWidth, "font-size": this.fontsize };
    },
  },
  methods: {
    goToDetail(iid) {
      this.$router.push("/detail/" + iid);
    },
    imgLoad(){
      this.$emit('imgLoad')
      this.$bus.$emit('imgLoad')
    }
  },
};
</script>

<style scoped>
#good-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: flex-start;
  margin-top: 5px;
}
img {
  width: 100%;
}
.title {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 8px 0 5px 0;
}
.price-collect {
  display: flex;
  width: 80%;
  justify-content: space-around;
}
</style>